<!--
 @description  生产类型核心指标统计
 @fileName CoreData.vue
 @author zengqiongying
 @created 2021/05/21 16:11:24
-->
<template>
  <div>
    <div class="core-box">
      <template v-for="(item,index) in coreData">
        <div
          :key="index"
          class="core-item"
          :class="{
            'half_item':index===3 || index===4 || coreData.length===2 || coreData.length==4,
            'no-br':(coreData.length===5 && (index===4 || index===2)) || (coreData.length===4 && (index===1 || index===3))
          }"
        >
          <div class="c-title" @click.stop="openInstrusction('produces',item.title)">
            <img class="icon" :src="item.icon">
            {{ item.title }}({{ item.title==='床垫'?'张':'套' }})
            <img class="icon_inst" src="@/assets/image/icon_instructions.png">
          </div>
          <div class="today">今日<span :class="item.colorClass">{{ item.today | filterForamtThousand }}</span></div>
          <div class="month">
            <div>昨日<span :class="item.colorClass">{{ item.yesterday | filterForamtThousand }}</span></div>
            <div>本月<span :class="item.colorClass">{{ item.month | filterForamtThousand }}</span></div>
          </div>
        </div>
      </template>
    </div>
    <div class="core-update-time">
      统计截止时间: {{ showDate }}
    </div>
  </div>
</template>

<script>
import { parseTime } from '@/utils'
import { getProducesCoreQuantity } from '@/apis/produces'
import iconBanshi from '@/assets/image/pro_type_banshi.png'
import iconShimu from '@/assets/image/pro_type_shimu.png'
import iconShafa from '@/assets/image/pro_type_shafa.png'
import iconChuangdian from '@/assets/image/pro_type_chuangdian.png'
import iconDingzhi from '@/assets/image/pro_type_dingzhi.png'
import showDateMixin from '@/mixins/showCoreTime'
export default {
  name: 'ProductionCoreData',
  mixins: [showDateMixin],
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      typeData: [
        { title: '板式', icon: iconBanshi, colorClass: 'color-red', today: 0, yesterday: 0, month: 0 },
        { title: '实木', icon: iconShimu, colorClass: 'color-blue', today: 0, yesterday: 0, month: 0 },
        { title: '沙发', icon: iconShafa, colorClass: 'color-green', today: 0, yesterday: 0, month: 0 },
        { title: '床垫', icon: iconChuangdian, colorClass: 'color-yellow', today: 0, yesterday: 0, month: 0 },
        { title: '定制', icon: iconDingzhi, colorClass: 'color-greens', today: 0, yesterday: 0, month: 0 }
      ],
      coreData: []
    }
  },
  watch: {
    coreDate(val, oldVal) {
      this.getQuantityData()
    }
  },
  created() {
    this.getQuantityData()
  },
  methods: {
    getQuantityData() {
      const date = parseTime(this.coreDate, '{y}-{m}-{d}')
      getProducesCoreQuantity(date).then(res => {
        if (res.data && res.data.length) {
          this.coreData = []
          this.$emit('set-factory', res.data)
          res.data.forEach(v => {
            const index = this.typeData.findIndex(t => v.factoryTypeName.indexOf(t.title) > -1)
            if (index > -1) {
              const coreItem = { ...this.typeData[index], ...{
                today: v.todayCompletedQuantity || '-',
                yesterday: v.yesterdayCompletedQuantity || '-',
                month: v.monthCompletedQuantity || '-'
              }}

              this.coreData.push(coreItem)
            }
          })
        }
      })
    }
  }
}

</script>
<style lang='less' scoped>
.core-box{
    position: relative;
    display:flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right:-10px;
    &::before{
      content: '';
      position: absolute;
      left: 10px;
      right: 10px;
      top: 0;
      height: 1px;
      background: #F5F6F7;
    }
    &::after{
      content: '';
      position: absolute;
      left: 10px;
      right: 10px;
      bottom: 0;
      height: 1px;
      background: #F5F6F7;
    }
    .core-item{
      position: relative;
      width: 33.3333%;
      height: 108px;
      padding:15px 10px;
      box-sizing: border-box;
      border-bottom: 1px solid #F5F6F7;
      box-sizing: border-box;
      letter-spacing: 1px;
      color: #888;
      font-size: 12px;
      &::after{
        content: '';
        position: absolute;
        right: 0;
        top: 15px;
        bottom: 15px;
        width: 1px;
        background:#F5F6F7 ;
      }
      &:last-child{
        &::after{
          display: none;
        }
      }
      &.half_item{
        width: 50%;
      }
      &.no-br{
        &::after{
          display: none;
        }
      }
      .today{
        display: flex;
        align-items:center;
        justify-content: center;
        height: 24px;
        line-height: 24px;
        margin-bottom: 10px;
        span{
          margin-left: 2px;
          font-size: 20px;
          font-family: 'PFZH';
        }
      }
      .month{
        display: flex;
        align-items: center;
        justify-content:center;
        line-height: 16px;
        font-size:10px;
        white-space: nowrap;
        letter-spacing: 0;
        div:last-child{
          margin-left:5px;
        }
        span{
          margin-left: 1px;
        }
      }
    }
  }

  .c-title{
    height: 20px;
    display: flex;
    justify-content: center;
    align-items:center;
    margin-bottom: 10px;
    color: #999;
    font-size: 12px;
    font-family: 'PFZH';
    white-space: nowrap;
    .icon{
      margin-right: 5px;
      width: 18px;
      height: auto;
    }
  }

  .core-update-time{
    // border-top:1px solid #F5F6F7;
    padding-top: 10px;
    line-height: 18px;
    text-align: center;
    color: #999999;
    letter-spacing: 1px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
